<template>
<div class="contentClass">
  <div style="margin-bottom: 20px">
    <Button type="info" @click="addZhfwss"><Icon type="md-add"/>添加</Button>
  </div>
  <template>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="updatePlace(row)">编辑</Button>
        <Button type="error" size="small" style="margin-right: 5px" @click="deletePlace(row)">删除</Button>
      </template>
    </Table>
  </template>
  <Modal v-model="modal" title="综合服务设施" width="700" @on-ok="addZhfwssConfirm">
    <Form :model="ZhfwssInfo" style="margin-left: 10%">
      <Row class="bench_search">
        <Col align="right" style="padding-top: 8px;" span="6" >
          <span style="color: red">*</span>
          综合服务设施名称：</Col>
        <Col span="8">
          <Input style="width: 323px" v-model="ZhfwssInfo.name"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" style="padding-top: 8px;" span="6">
          <span style="color: red">*</span>
          办公电话：</Col>
        <Col span="8">
          <Input style="width: 323px" v-model="ZhfwssInfo.place_fzr_phone"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          建设方式：</Col>
        <Col span="8">
          <Select v-model="ZhfwssInfo.zhfwss_jsfs" style="width: 323px" >
            <Option value="1">新建</Option>
            <Option value="2">改造</Option>
            <Option value="3">购买</Option>
            <Option value="4">项目配套</Option>
            <Option value="5">整合共享</Option>
            <Option value="6">其他</Option>
          </Select>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          产权单位：</Col>
        <Col span="8">
          <Input style="width: 323px" v-model="ZhfwssInfo.zhfwss_cqdw"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          综合服务设施地位置：</Col>
        <Col span="8">
          <Input style="width: 323px" v-model="ZhfwssInfo.place_address"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          综合服务设施面积：</Col>
        <Col span="8">
          <Input type="number" disabled style="width: 323px" v-model="ZhfwssInfo.place_area">
            <span slot="append">㎡</span>
          </Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          办公面积：</Col>
        <Col span="8">
          <Input style="width: 323px" type="number" v-model="ZhfwssInfo.zhfwss_bgmj">
            <span slot="append">㎡</span>
          </Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">办公面积占比：</Col>
        <Col span="8">
          <Input style="width: 323px" disabled v-model="ZhfwssInfo.zhfwss_bgmjzb">
            <span slot="append">%</span>
          </Input>
        </Col>
      </Row><Row class="bench_search">
      <Col align="right" span="6" style="padding-top: 8px">
        <span style="color: red">*</span>
        服务面积：</Col>
      <Col span="8">
        <Input style="width: 323px"  type="number" v-model="ZhfwssInfo.zhfwss_fwmj">
          <span slot="append">㎡</span>
        </Input>
      </Col>
    </Row><Row class="bench_search">
      <Col align="right" span="6" style="padding-top: 8px">服务面积占比：</Col>
      <Col span="8">
        <Input style="width: 323px" disabled v-model="ZhfwssInfo.zhfwss_fwmjzb">
          <span slot="append">%</span>
        </Input>
      </Col>
    </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          拥有服务功能：</Col>
        <Col span="8">
          <Input style="width: 323px" v-model="ZhfwssInfo.zhfwss_yyfwgn"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          挂牌类型：</Col>
        <Col span="8">
          <Select v-model="ZhfwssInfo.zhfwss_gplx" style="width: 323px" >
            <Option value="1">内部</Option>
            <Option value="2">外部</Option>
          </Select>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          挂牌名称：</Col>
        <Col span="8">
          <Input style="width: 323px" v-model="ZhfwssInfo.zhfwss_gpmc"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          特殊情况说明：</Col>
        <Col span="8">
          <Input style="width: 323px" type="textarea" maxlength="150" show-word-limit v-model="ZhfwssInfo.zhfwss_tsqksm"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">简介：</Col>
        <Col span="8">
          <Input style="width: 323px" type="textarea" maxlength="150" show-word-limit v-model="ZhfwssInfo.place_remarks"></Input>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col align="right" span="6" style="padding-top: 8px">
          <span style="color: red">*</span>
          综合服务设施上传图片：</Col>
        <div class="demo-upload-list" v-for="(item,index) in imgList" :key="index">
          <img :src="item">
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
          </div>
        </div>
        <Upload
            ref="upload"
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
            style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
        <Modal title="查看图片" v-model="visible">
          <img :src="imgListShow" v-if="visible" style="width: 100%">
        </Modal>
      </Row>
    </Form>
    <div slot="footer">
      <Button  @click="modal = false">取消</Button>
      <Button type="primary" @click="addZhfwssConfirm">确定</Button>
    </div>
  </Modal>
  <Modal v-model="deleteModal" :styles="{top: '120px'}" title="综合服务设施删除确认" width="500" @on-ok="addZhfwssConfirm">
    <div style="margin-top: 20px;margin-bottom: 20px">
      是否确定删除该综合服务设施！
    </div>
    <div slot="footer">
      <Button  @click="deleteModal = false">取消</Button>
      <Button type="primary" @click="deletePlaceConfirm">确定</Button>
    </div>
  </Modal>
  <HTMapMarker
      :placeInfo="ZhfwssInfo"
      :gardenInfo="pickInfo"
      mapID="zhfwss"
      ref="HTMapMarker"
      @placeCallBack="placeCallBack"></HTMapMarker>
</div>
</template>

<script>
import { mapTypeChange } from '../../../../libs/mapTypeUtil'
import HTMapMarker from '../../../../components/HT-map-marker/HT-map-marker'
import { createUpLoadFiles, getSign } from '../../../../api/common'
import { addPlace, getCompanyDetailByCode, date2str, findMerchantList, deletePlace } from '../../../../api/eventlist'
import * as imageConversion from 'image-conversion'
export default {
  name: 'communityZhfwss',
  components: { HTMapMarker },
  props: {
    pickInfo: Object
  },
  data () {
    return {
      deleteModal: false,
      deleteInfo: {},
      columns: [
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '面积（㎡）',
          key: 'place_area',
          align: 'center'
        },
        {
          title: '办公电话',
          key: 'place_fzr_phone',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      upPicData: {
        fileName: 'zhfwss',
        filePath: 'grid/zhfwss'
      },
      data: [],
      modal: false,
      ZhfwssInfo: {
        zhfwss_fwmj: 0,
        zhfwss_bgmj: 0,
        place_area: 0
      },
      mapType: '',
      imgList: [],
      visible: false,
      imgListShow: ''
    }
  },
  methods: {
    mjCount () {
      this.$set(this.ZhfwssInfo, 'place_area', parseInt(this.ZhfwssInfo.zhfwss_bgmj) + parseInt(this.ZhfwssInfo.zhfwss_fwmj))
      if (this.ZhfwssInfo.place_area && this.ZhfwssInfo.zhfwss_bgmj) {
        this.$set(this.ZhfwssInfo, 'zhfwss_bgmjzb', ((parseInt(this.ZhfwssInfo.zhfwss_bgmj) / parseInt(this.ZhfwssInfo.place_area)) * 100).toFixed(2))
      }
      if (this.ZhfwssInfo.place_area && this.ZhfwssInfo.zhfwss_fwmj) {
        this.$set(this.ZhfwssInfo, 'zhfwss_fwmjzb', ((parseInt(this.ZhfwssInfo.zhfwss_fwmj) / parseInt(this.ZhfwssInfo.place_area)) * 100).toFixed(2))
      }
    },
    init () {
      let data = {
        id: this.pickInfo.id,
        select_type: 'Z'
      }
      findMerchantList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    updatePlace (e) {
      this.ZhfwssInfo = {}
      this.ZhfwssInfo = e
      if (e.place_img) {
        this.imgList = e.place_img.split(',')
      }
      this.modal = true
      if (this.mapType === 'GD') {
        let x = this.ZhfwssInfo.csc_mapjson.split(',')
        this.center = []
        this.center.push(x[0])
        this.center.push(x[1])
      }
    },
    deletePlace (e) {
      this.deleteModal = true
      this.deleteInfo = e
    },
    deletePlaceConfirm () {
      deletePlace(this.deleteInfo).then(ret => {
        if (ret.data.errcode === 0) {
          // this.$Notice.success({ title: '删除成功', desc: ret.data.errmsg })
          let _this = this
          setTimeout(function () {
            _this.$Notice.success({ title: '删除成功', desc: ret.data.errmsg })
            _this.init()
          }, 1000)
          this.deleteModal = false
        } else {
          this.$Notice.error({ title: '删除失败', desc: ret.data.errmsg })
        }
      })
    },
    addZhfwss () {
      this.ZhfwssInfo = {}
      this.imgList = []
      // this.getCompanyDetailByCode()
      this.modal = true
    },
    getCompanyDetailByCode () {
      getCompanyDetailByCode().then(ret => {
        if (ret.data.errcode === 0 || ret.data.errcode === 10003) {
          if (ret.data.errcode === 0) {
            this.communityDetail = ret.data.data
            if (this.communityDetail.detail === '' || this.communityDetail.detail === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区简介！' })
              return
            }
            if (this.communityDetail.community_mobile === '' || this.communityDetail.community_mobile === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区电话！' })
              return
            }
            if (this.communityDetail.area === '' || this.communityDetail.area === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区面积！' })
              return
            }
            if (this.communityDetail.label_img === '' || this.communityDetail.label_img === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区图片！' })
              return
            }
            if (this.communityDetail.address === '' || this.communityDetail.address === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区地址！' })
              return
            }
            if (this.communityDetail.sqsj === '' || this.communityDetail.sqsj === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区书记姓名！' })
              return
            }
            if (this.communityDetail.sqsjdh === '' || this.communityDetail.sqsjdh === undefined) {
              this.$Notice.error({ title: '缺少社区信息，请先完善社区基本信息！', desc: '缺少社区书记电话！' })
              return
            }
          }
          this.modal = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    },
    addZhfwssConfirm () {
      if (!this.ZhfwssInfo.name) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项名称' })
        return
      }
      if (!this.ZhfwssInfo.zhfwss_gplx) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项挂牌类型' })
        return
      }
      if (!this.ZhfwssInfo.zhfwss_gpmc) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项挂牌名称' })
        return
      }
      if (!this.ZhfwssInfo.zhfwss_jsfs) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项建设方式' })
        return
      }
      if (!this.ZhfwssInfo.zhfwss_cqdw) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项产权单位' })
        return
      }
      if (!this.ZhfwssInfo.zhfwss_yyfwgn) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项拥有服务功能' })
        return
      }
      if (!this.ZhfwssInfo.name) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项名称' })
        return
      }
      if (!this.ZhfwssInfo.place_area) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项面积' })
        return
      }
      if (this.ZhfwssInfo.place_area < 0) {
        this.$Notice.error({ title: '数据异常', desc: '面积数据异常' })
        return
      }
      if (this.ZhfwssInfo.zhfwss_bgmj < 0) {
        this.$Notice.error({ title: '数据异常', desc: '办公面积数据异常' })
        return
      }
      if (this.ZhfwssInfo.zhfwss_fwmj < 0) {
        this.$Notice.error({ title: '数据异常', desc: '服务面积数据异常' })
        return
      }
      // if (!this.ZhfwssInfo.place_fzr) {
      //   this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项负责人' })
      //   return
      // }
      if (!this.ZhfwssInfo.place_fzr_phone) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项办公电话' })
        return
      }
      // if (this.mapType === 'GD') {
      //   if (!this.ZhfwssInfo.csc_mapjson) {
      //     this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项坐标' })
      //     return
      //   }
      // }
      // if (this.mapType === 'HT') {
      //   if (!this.ZhfwssInfo.csc_mapjson_ht) {
      //     this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项坐标' })
      //     return
      //   }
      // }
      if (!(/^[1-9]{1}[0-9]{5,8}$/.test(this.ZhfwssInfo.place_fzr_phone)) &&
          !(/^[0][1-9]{2,3}-[0-9]{5,10}$/.test(this.ZhfwssInfo.place_fzr_phone)) &&
          !(/^((13[0-9])|(14[5,7,9])|(15[0-3,5-9])|(16[6,7])|(17[0-9])|(18[0-9])|(19[1,5,8,9]))\d{8}$/.test(this.ZhfwssInfo.place_fzr_phone))) {
        this.$Notice.error({ title: '必填项办公电话错误', desc: '办公电话数据错误' })
        return
      }
      console.log(this.ZhfwssInfo.place_fzr_phone.length)
      // this.ZhfwssInfo.place_fzr_phone.length
      // ^((13[0-9])|(14[5,7,9])|(15[0-3,5-9])|(16[6,7])|(17[0-9])|(18[0-9])|(19[1,5,8,9]))\d{8}$
      this.ZhfwssInfo.merchant_type = 'Z0001'
      this.ZhfwssInfo.place_img = this.imgList.join(',')
      if (this.ZhfwssInfo.place_img === '' || this.ZhfwssInfo.place_img === undefined) {
        this.$Notice.error({ title: '缺少必填项', desc: '请填写必填项图片！' })
        return
      }
      this.ZhfwssInfo.place_time_begin = date2str(this.ZhfwssInfo.place_time_begin)
      this.ZhfwssInfo.place_time_end = date2str(this.ZhfwssInfo.place_time_end)
      this.ZhfwssInfo.place_cl_time = date2str(this.ZhfwssInfo.place_cl_time)
      this.ZhfwssInfo.mapType = this.mapType
      let data = {
        placeInfo: this.ZhfwssInfo,
        pickInfo: this.pickInfo
      }
      addPlace(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.imgList = []
          let _this = this
          setTimeout(function () {
            _this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
            _this.init()
            _this.modal = false
          }, 1000)
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    },
    pickMap () {
      if (this.mapType === 'HT') {
        this.$refs.HTMapMarker.init()
      }
    },
    placeCallBack (e) {
      this.ZhfwssInfo.csc_mapjson_ht = e
      this.modal = false
      this.$nextTick(() => {
        this.modal = true
      })
    },
    handleView (img) {
      this.imgListShow = img
      this.visible = true
    },
    handleRemove (file) {
      this.imgList.splice(this.imgList.indexOf(file), 1)
    },
    handleBeforeUpload (file) {
      const check = this.imgList.length < 4
      if (!check) {
        this.$Notice.warning({
          title: '最多上传3张图片'
        })
        return check
      }
      this.beforeUpload(file)
    },
    beforeAvatarUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$Notice.error({ title: '上传失败', desc: '上传头像图片只能是 JPG 或 PNG 格式!' })
        return false
      }
      return new Promise(() => {
        imageConversion.compressAccurately(file, 200).then(res => {
          let that = this
          const reader = new FileReader()
          reader.readAsDataURL(new File([res], '', { type: res.type, lastModified: Date.now() }))
          reader.onload = () => {
            let index = reader.result.indexOf('base64,') + 7
            that.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
            that.upPicData.file = reader.result.substring(index)
            that.upPic(that.upPicData)
          }
        })
      })
    },
    beforeUpload (file) {
      if (this.imgList.length >= 3) {
        this.$Notice.error({ title: '上传失败', desc: '上传图片达到限制' })
        return
      }
      if (file.size / 1024 / 1024 > 1) { // 超过1M 压缩 图片为200K
        return this.beforeAvatarUpload(file)
      }
      var time = new Date().getTime()
      let timeStep = time.toString()
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.fileName = that.upPicData.fileName + timeStep + '.' + file.type.substring(6)
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      let timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let url = res.data.data.docking_url
          let params = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(url, params).then(res => {
            if (res.data.errcode === 0) {
              let url = res.data.data
              this.imgList.push(url)
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    }
  },
  mounted () {
    if (this.$route.query.mapType === 'HT') {
      this.mapType = 'HT'
    } else {
      this.mapType = mapTypeChange()
    }
    this.init()
  },
  watch: {
    // ZhfwssInfo: {
    //   handler (newVal, oldVal) {
    //     console.log(newVal.place_area, 'a')
    //     console.log(newVal.zhfwss_bgmj, 'b')
    //     console.log(newVal.zhfwss_fwmj, 'c')
    //     if (newVal.place_area && newVal.zhfwss_fwmj && newVal.zhfwss_bgmj) {
    //       this.$set(this.ZhfwssInfo, 'zhfwss_bgmjzb', parseInt(this.ZhfwssInfo.zhfwss_bgmj) / parseInt(this.ZhfwssInfo.place_area))
    //       this.$set(this.ZhfwssInfo, 'zhfwss_fwmjzb', parseInt(this.ZhfwssInfo.zhfwss_fwmj) / parseInt(this.ZhfwssInfo.place_area))
    //     }
    //   }
    // },
    'ZhfwssInfo.zhfwss_bgmj': {
      deep: true,
      handler (newVal, oldVal) {
        this.mjCount()
      }
    },
    'ZhfwssInfo.zhfwss_fwmj': {
      deep: true,
      handler (newVal, oldVal) {
        this.mjCount()
      }
    }
  }
}
</script>

<style scoped>
.bench_search {
  margin-bottom: 10px;
}
.demo-upload-list{
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
/*.vertical-center-modal{*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*.contentClass >>> .ivu-modal{*/
/*  top: 120px;*/
/*}*/
</style>
